<template>
  <div style="width: 80%;margin: auto;margin: 50px">
    <div>
      <span>{{ this.tableOptions.column1 }}</span>
      <span style="margin-left: 20px">{{ this.tableOptions.column1Index }}</span>
    </div>
    <div>
      <span>{{ this.tableOptions.column2 }}</span>
      <span style="margin-left: 20px">{{ this.tableOptions.column2Index }}</span>
    </div>
    <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        stripe
        style="width: 100%; margin-top: 20px">
      <el-table-column
          prop="id"
          label="父级id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="id"
          label="供电单位"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="居民">
      </el-table-column>
      <el-table-column
          prop="amount1"
          label="三零非居民">
      </el-table-column>
      <el-table-column
          prop="amount2"
          label="非三零">
      </el-table-column>
      <el-table-column
          prop="amount3"
          label="高压单电源">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987122',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987122',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        pid: 111,
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        pid: 111,
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '111',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '222',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '333',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '444',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '555',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '666',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '777',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '888',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: '999',
        amount2: '4.1',
        amount3: 15
      }, {
        id: '12987127',
        name: '王小虎',
        amount1: 'aaa',
        amount2: '4.1',
        amount3: 15
      }],
      tableOptions: {
        column1: [3, 5, 4, 2],
        column2: [2, 1, 3, 2, 1, 3, 1, 1],
        column1Index: [],
        column2Index: [],
      },
    };
  },
  mounted() {
    let column1StartNum = 0
    let column2StartNum = 0
    this.tableOptions.column1Index = [0, ...this.tableOptions.column1].map(item => column1StartNum += item)
    this.tableOptions.column2Index = [0, ...this.tableOptions.column2].map(item => column2StartNum += item)
    console.log("this.tableOptions.column1Index", this.tableOptions.column1Index)
    console.log("this.tableOptions.column2Index", this.tableOptions.column2Index)
  },
  methods: {
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if ((columnIndex === 0 || columnIndex === 1) && rowIndex > 11) {
        // debugger
      }
      if (columnIndex === 0) {//第一列，rowIndex从第一行开始不包括表头
        let columnIndex = this.tableOptions.column1Index.indexOf(rowIndex)
        if (columnIndex !== -1) {
          return {
            rowspan: columnIndex < this.tableOptions.column1.length ? this.tableOptions.column1[columnIndex] : 1,
            colspan: 1
          };
        } else if (rowIndex >= this.tableOptions.column1Index[this.tableOptions.column1Index.length - 1]) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else if (columnIndex === 1) {//第二列
        let columnIndex = this.tableOptions.column2Index.indexOf(rowIndex)
        if (columnIndex !== -1) {
          return {
            rowspan: columnIndex < this.tableOptions.column2.length ? this.tableOptions.column2[columnIndex] : 1,
            colspan: 1
          };
        } else if (rowIndex >= this.tableOptions.column2Index[this.tableOptions.column2Index.length - 1]) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>